import { defineComponent, ref, watch, onMounted } from 'vue';
import event from '../tools/event';
import '../style/textarea.css';

export default defineComponent({
  name: 'text-area',
  props: {
    propContent: {
      type: String,
      default: '',
    },
    isReadonly: {
      type: Boolean,
      default: false,
    },
    addStyle: {
      type: Object,
      default: Object.create(null),
    },
  },
  setup(props) {
    const textAreaContent = ref('');

    onMounted(() => {
      textAreaContent.value = props.propContent;
    });

    watch(textAreaContent, (val) => {
      event.emit('textarea-change', val);
    });

    return () => (
      <div class={['el-textarea']}>
        <textarea
          class={['el-textarea__inner__1']}
          readonly={props.isReadonly}
          wrap="off"
          v-model={textAreaContent.value}
          style={props.addStyle}
          placeholder="说明"
        />
      </div>
    );
  },
});
